<template>
  <div class="upload">
      <input type="file" class="input-file" :id="fileId"  @change="chooseImage">
      <label class="img-box" :for="fileId">
        <i class="el-icon-plus"></i>
      </label>
      <img :src="imgUrl" v-show="imgUrl" alt="" class="image">
  </div>
</template>

<script>
export default {
  name: "Upload",
  props: {
    model: Object,
    imgName: String,
    imgSrc: String
  },
  mounted () {
     
  },
  data() {
    
    return {
      imgUrl: this.imgSrc,
      fileId: this._uid
    };
  },
  methods: {
    chooseImage (e) {
        
        var imageFile = e.target.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(imageFile);
        reader.onload = (e) => {
         this.imgUrl = reader.result;
         this.model[this.imgName] = this.imgUrl;
       }
    }  
  } 
  
}
</script>

<style lang="stylus" scoped>
  .upload
    width 200px
    height 80px
    position relative
    display flex
    .input-file
      position absolute
      visibility hidden
    .img-box
      width 80px
      height 80px
      border 1px dashed gray
      cursor pointer
      display flex
      align-items center
      justify-content center
      .el-icon-plus
        font-size 30px
    .image 
      width 80px
      height 80px
      margin-left 20px

        
</style>


